<template>
    <div ref="echart" style="width: 100%; height: 100%;">
        <div v-if="resetSizeFlag" id="chartContainer" ref="chart" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        formatterInfo: {
            type: Array,
            default: () => {
                return []
            }
        },
        seriesData: {
            type: Array,
            default: () => {
                return [820, 932, 901, 934, 1290, 1330, 1320]
            }
        },
        seriesbarList: {
            type: Array,
            default: () => {
                return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        },
        xAxis: {
            type: Array,
            default: () => {
                return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        },
    },
    name: 'LineChart',
    data() {
        return {
            resetSizeFlag: true,
            chartInstance: null,
            erd: null
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chartInstance = echarts.init(this.$refs.chart);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (e) => {
                        let info = '';
                        let dataIndex = e[0].dataIndex;
                        let data = e[0].data;
                        let date = e[0].axisValue
                        console.log(e[0])
                        if (this.formatterInfo[dataIndex]) {
                            info = this.formatterInfo[dataIndex].join('</br>');
                        };
                        return `直鱼${data}尾</br>用药日期：${date}</br>${info || `无用药记录`}`;
                    }
                },
                label: {
                    show: true,
                    position: 'top'
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxis,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.seriesData,
                    type: 'line',
                    smooth: true,
                    tooltip: {
                        trigger: 'axis', // 触发类型，默认数据触发，可选为：'item'、'axis'  
                    }
                }],
                dataZoom: [
                    {
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件  
                        start: 0,      // 左边在 10% 的位置。  
                        end: 50         // 右边在 60% 的位置。  
                    },
                    {
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件  
                        start: 0,      // 左边在 10% 的位置。  
                        end: 50        // 右边在 60% 的位置。  
                    }
                ]
            };
            this.chartInstance.setOption(option);
        }
    },
    beforeDestroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
        }
    }
};
</script>

<style scoped>
div {
    width: 100%;
    height: 100%;
}
</style>